<template>
	<div class="system_config_container">
		<el-scrollbar>
			<router-link class="link" to="/system/config/site">网站信息管理</router-link>
			<router-link class="link" to="/system/config/appsafe">应用安全管理</router-link>
			<router-link class="link" to="/system/config/accountsafe">账号安全管理</router-link>
			<router-link class="link" to="/system/config/backup">备份与恢复</router-link>
			<router-link class="link" to="/system/config/restriction">访问限制</router-link>
		</el-scrollbar>
		<router-view></router-view>
	</div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.system_config_container {
	display: flex;
	height: 100%;
	.el-scrollbar {
		width: 20%;
		flex-shrink: 0;
		min-width: 210px;
		max-width: 360px;
		box-sizing: border-box;
		border-right: solid 1px #e4e7ed;
		a.link {
			display: flex;
			padding: 10px 16px;
			box-sizing: border-box;
			color: #606266;
			height: 40px;
			border-radius: 4px;
			&:nth-child(n + 2) {
				margin-top: 10px;
			}
		}
		a.link:hover {
			background-color: var(--primary-background-plain-disabled);
			color: var(--primary-hover);
		}
		a.link.router-link-active {
			background-color: var(--primary-border-plain-disabled);
			color: var(--primary-active);
		}
	}
	&:deep(.el-scrollbar__view) {
		padding: 16px;
	}
	.content {
		flex: 1;
		padding: 16px;
		overflow: hidden;
	}
}
</style>
